<!--  实验课程  -->
<template>
  <div class="bodyStyle_experimentalCurriculum">
    <div class="contentClass_experimentalCurriculum">
      <div class="oneClass">
        <div class="labelLeftClass">
          专业：
        </div>
        <div class="labelRightClass">
          <template v-for="(item , index) in list">
            <button type="primary" v-if="index<showTotal" :key="item" :ref="item" class="sprnClass" :class="{'Color4':item.id == active}" @click="spanClic(item.id)">
              &nbsp;&nbsp; {{ item.maName }}&nbsp;&nbsp;
            </button>
          </template>
          <span class="sprnClass" @click="spanClic('x')"  v-if="list.length > 10">
          &nbsp;&nbsp; {{moreOpen}} &nbsp;&nbsp;
           </span>
        </div>
      </div>
      <div class="twoClass" v-if="active != '1'">
        <div class="labelLeftClass">
          类别：
        </div>
        <div class="labelRightClass">
          <template v-for="(item , index) in list1">
            <button type="primary" v-if="index<showTotal1" :key="item" :ref="item" class="sprnClass" :class="{'Color4':item.id == active1}" @click="spanClic1(item.id)">
              &nbsp;&nbsp; {{ item.maName }}&nbsp;&nbsp;
            </button>
          </template>
          <span class="sprnClass" @click="spanClic1('y')" v-if="list1.length > 10">
          &nbsp;&nbsp; {{moreOpen1}} &nbsp;&nbsp;
        </span>
        </div>
      </div>
    </div>
    <div>

    </div>
    <div class="exeListClass" v-for="item in experimentDate" :key="item">
      <a-card hoverable style="width: 22%" class="cardClass" @click="clickView(item)">
        <template #cover>
<!--          <img-->
<!--            class="imgClass"-->
<!--            alt="example"-->
<!--            :src="item.showLargerVersion"-->
<!--          />-->
          <!-- 这个div设置为宽度100%，并且溢出显示隐藏 -->
          <div class="banner__inner">
            <!-- 这个div设置为和img图片同样的宽高，并且用absolute定位设置为居中 -->
            <div class="banner-img__wrapper">
              <img  class="imgClass" :src="item.showLargerVersion">
            </div>
          </div>
        </template>
        <a-card-meta  :title="item.emName" />
      </a-card>
    </div>
  </div>


</template>
<script>
import {defineComponent, reactive, ref, toRaw} from 'vue';
import router from "@/route";
import {filtrate, getClssify, screeningSimulationExperiments} from "@/api/module/experiment";

export default defineComponent({
  components: {
  },

  setup: function () {


    // 控制类别筛选列表的数据组/文字/显示条数/当前选中
    let list = ref([])
    let list1 = ref([])
    const active = ref(1)
    const showTotal = ref(10)
    const active1 = ref(1)
    const showTotal1 = ref(10)
    const moreOpen = ref('展开...');
    const moreOpen1 = ref('展开...');
    const showTwo = ref(false);
    const experimentDate = ref([]);
    // 类别点击时间
    const spanClic = (value) => {
      console.log(value)
      if (value == 'x') {
        if(showTotal.value == 999){
          showTotal.value = 10
          moreOpen.value="展开.."
        }else {
          showTotal.value = 999
          moreOpen.value="收起"
        }
      }else if(value == 'y'){
        if(showTotal1.value == 999){
          showTotal1.value = 10
          moreOpen1.value="展开.."
        }else {
          showTotal1.value = 999
          moreOpen1.value="收起"
        }
      }else {
        active.value = value
        getMajorClssify(value)
        showTwo.value=true
        getExperiment(value,0)
      }
    }

    const spanClic1 = (value) => {
      console.log(value)
      if(value == 'y'){
        if(showTotal1.value == 999){
          showTotal1.value = 10
          moreOpen1.value="展开.."
        }else {
          showTotal1.value = 999
          moreOpen1.value="收起"
        }
      }else {
        active1.value = value
        getExperiment(value,1)
      }
    }
    // 路由跳转到详情页
    const clickView = (value) => {
      localStorage.setItem("aaa","1")
      router.push({
        path: '/scan/comm/details/experimentalDetails',
        query: {
          id: JSON.stringify(toRaw(value).id)
        }
      })
    }

    const getListDate = () => {
      getMajor()
      getExperiment(999,999)
    }
    // 获取专业
    const getMajor = () => {
      filtrate({}).then((response)=>{
        list.value = response.data
      })

    }
    // 获取专业分类数据
    const getMajorClssify = (value) => {
      getClssify({"id":value}).then((response)=>{
        list1.value = response.data
      })
    }
    // 获取实验列表
    const getExperiment = (value,flag) => {
      let paran = {
        "id":value,
        "flag":flag
      }
      screeningSimulationExperiments(paran).then((response)=>{
        experimentDate.value = response.data
      })
    }
    // 开局加载
    getListDate()
    return {
      showTwo, //
      list,
      list1,
      spanClic,
      spanClic1,
      clickView, // 路由跳转到详情页
      moreOpen, // 展开收起
      moreOpen1, // 展开收起
      active, //
      active1, //
      showTotal, //
      showTotal1, //
      experimentDate, //
    };
  },

});
</script>
<style lang="less" scoped>
.bodyStyle_experimentalCurriculum {
  width: 100%;
  height: 100%;
  float: left;
  background-color: white;

}

.contentClass_experimentalCurriculum {
  width: 80%;
  height: 100%;
  float: left;
  margin-left: 10%;
  margin-top: 2%;
  background-color: #F6F7F8;
}


.labelLeftClass {
  font-size: 18px;
  width: 5%;
  float: left;
  //font-weight: 600;
  margin-left: 3%;
  margin-top: 0.5%;
  color: #8d9aa6;

}
.labelRightClass {
  float: right;
  width: 92%;
  //font-weight: 600;
  //margin-left: 5%
}

.sprnClass {
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  display: inline-block;
  text-overflow: ellipsis;
  font-size: 18px;
  border: 0;
  margin-left: 1%;
  background-color: #F6F7F8;
}

.sprnClass:hover {
  cursor: pointer; // 鼠标变小手
}
.Color4{
  color: white;
  background-color: #3E65C7;
  border-radius: 10px; // 边框变圆角
}
.exeListClass {
  margin-left: 8.5%;
  margin-top: 1%;
  width: 85%;
  background-color: #2d8cf0;
}
.twoClass{
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 2%;
}
.cardClass {
  float: left;
  height: 420px;
  margin-left: 2%;
  margin-top: 2%;
}

.iframeClass {
  float: left;
  width: 68%;
  margin-left: 17%;
  background-color: #6272a4;
}
.imgClass{
  height: 360px;
}
.banner-img__wrapper {
  position: absolute;
  width: 100%;
  height: 360px;
}
.banner__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 360px;
}

</style>
